<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <top v-model="ipt" @handlerc="handler" >
            <template v-slot>
                <h3>未完成</h3>
                <div v-for="item in unfinishlist">
                    <input type="checkbox" @click.prevent="handlerClick(item)">
                    {{item.contents}}
                    <button @click="del(item)">删除</button>
                </div>
                <h3>已完成</h3>
                <div v-for="item in finishlist">
                    <input type="checkbox" @click.prevent="handlerClick(item)" checked>
                    {{item.contents}}
                    <button @click="del(item)">删除</button>
                </div>

            </template>

        </top>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('top', {
            template: `<div>
                    <input type="text"  @keyup.enter="$emit('handlerc',$event.target.value)">
                    <button  @click="$emit('handler')">添加</button>
                    <slot></slot>
                </div>
            `,

        })
        // Vue.component('zcenter', {
        //     props: ['arr'],
        //     template: `<div>
        //         <div v-for="item in unfinishlist">
        //         <input type="checkbox" @click.prevent="handlerClick(item)">
        //         {{item.contents}}
        //         <button @click="del(item)">删除</button>
        //         </div>
        //         </div>
        //     `,
        //     methods: {
        //         handlerClick(ipt) {
        //             // this.$emit(事件名称，传输数据)
        //             // 事件派发
        //             this.$emit('gotoapp1', ipt)
        //         }
        //     },
        //     computed: {
        //         unfinishlist() {
        //             return this.arr.filter(ele => ele.isChecked === false)
        //         },
        //     }
        // })

        // Vue.component('xcenter', {
        //     props: ['arr'],
        //     template: `<div>
        //         <div v-for="item in finishlist">
        //         <input type="checkbox" @click.prevent="handlerClick(item)" checked>
        //         {{item.contents}}
        //         <button @click="del(item)">删除</button>
        //         </div></div>
        //     `,
        //     methods: {
        //         handlerClick(ipt) {
        //             // this.$emit(事件名称，传输数据)
        //             // 事件派发
        //             this.$emit('gotoapp1', ipt)
        //         }
        //     },
        //     computed: {
        //         finishlist() {
        //             return this.arr.filter(ele => ele.isChecked === true)
        //         },
        //     }


        // })

        // let bus = new Vue();

        let vm = new Vue({
            el: '#app',
            data: {
                ipt: '',
                list: [
                    {
                        id: 0,
                        contents: '吃饭',
                        isChecked: false
                    },
                ]
            },
            methods: {
                handler(i) {
                    this.list.push({
                        id: this.list.length,
                        contents: i,
                        isChecked: false
                    })
                    console.log(this.list);
                },
                handlerClick(item) {
                    this.list[item.id].isChecked = !item.isChecked
                    console.log(item);
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    this.list.forEach((ele, index) => {
                        ele.id = index
                    });
                }
            },
            computed: {
                unfinishlist() {
                    return this.list.filter(ele => ele.isChecked === false)
                },
                finishlist() {
                    return this.list.filter(ele => ele.isChecked === true)
                },
            }
        })
    </script>
</body>

</html>